<!--
 * @Author: wangdan
 * @Date: 2023-05-11 09:34:53
 * @LastEditors: wangdan
 * @LastEditTime: 2023-05-11 11:16:59
 * @Description: 
-->
<template>
  <!-- <aside>
    富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见
    <a
      target="_blank"
      class="link-type"
      href="https://armour.github.io/vue-typescript-admin-docs/features/components/rich-editor.html"
      >文档</a
    >
  </aside> -->
  <Editor
    id="tinymce"
    v-model="dataMap.content"
    :init="init"
    @input="dataMap.input"
    @blur="setHtml"
  ></Editor>
  <!-- <div class="editor-content" v-html="dataMap.content" /> -->
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, onActivated, onDeactivated } from 'vue'
import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons'
import 'tinymce/skins/ui/oxide/skin.css'

import 'tinymce'
// Default icons are required for TinyMCE 5.3 or above
import 'tinymce/icons/default'
// Import themes
import 'tinymce/themes/silver'
import 'tinymce/themes/mobile'
// Any plugins you want to use has to be imported
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/code'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/fullpage'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/help'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/image'
import 'tinymce/plugins/imagetools'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/media'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/noneditable'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/print'
import 'tinymce/plugins/save'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/spellchecker'
import 'tinymce/plugins/tabfocus'
import 'tinymce/plugins/table'
import 'tinymce/plugins/template'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/wordcount'
import { plugins, toolbar } from './config'
const dataMap = reactive({
  content:
    '<h1 style="text-align: center;">欢迎使用富文本编辑器!</h1><p style="text-align: center; font-size: 15px;"><img title="Logo" src="./favicon.ico" alt="Logo" width="100" height="100" /><ul><li>我们的文档是学习如何配置TinyMCE的绝佳资源</li><li>作为TinyMCE高级订阅的一部分，我们还提供企业级支持。</li></ul>',
  tinymceActive: true,
  input(value: any) {
    dataMap.content = value
    localStorage.setItem('content', value)
  }
})
const emit = defineEmits(['reload'])
const setHtml = () => {
  localStorage.setItem('content', dataMap.content)
  emit('reload')
}
const init = ref({
  language_url: '/langs/zh_CN.js', // 语言包位置，因为放在public下所以可以省略public
  selector: '#tinymce', //tinymce的id
  language: 'zh_CN', //语言类型
  // body_class: 'panel-body',
  skin_url: '/skins/ui/oxide',
  height: 500, //编辑器高度
  object_resizing: false,
  browser_spellcheck: true, // 拼写检查
  // elementpath: false, //禁用编辑器底部的状态栏
  // statusbar: false, // 隐藏编辑器底部的状态栏
  paste_data_images: true, // 允许粘贴图像
  // menubar: false, //最顶部文字信息
  menubar: 'file edit insert view format table',
  plugins: plugins,
  branding: false, //是否禁用“Powered by TinyMCE”
  toolbar: toolbar, //工具栏
  fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
  font_formats:
    '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;'
})
onMounted(() => {
  tinymce.init({})
})
onActivated(() => {
  dataMap.tinymceActive = false
})
onDeactivated(() => {
  dataMap.tinymceActive = true
})
</script>
<style lang="scss" scoped>
.tox-tinymce {
  margin-top: 20px;
}
</style>
